<template>
  <div v-loading="loading">
    <el-card
      shadow="never"
      style="margin:24px 0;"
    >
      <filter-panel @update="handleUpdate" />
    </el-card>
    <el-card
      shadow="never"
      style="margin:24px 0;"
    >
      <table-panel
        v-if="!loading"
        @showDetail="handleShowDetail"
      />
    </el-card>
    <el-dialog
      v-if="!loading"
      :title="dialog.traineeDetail.title"
      :visible.sync="dialog.traineeDetail.visible"
      :distory-on-close="true"
      width="calc(100% - 120px)"
    >
      <trainee-detail
        v-if="dialog.traineeDetail.visible"
        :detail="dialog.traineeDetail.detail"
      />
    </el-dialog>
  </div>
</template>

<script>
  import filterPanel from './components/filterPanel.vue'
  import tablePanel from './components/tablePanel.vue'
  import traineeDetail from './components/traineeDetail.vue'
  export default {
    name: 'recordStatistic',
    components: {
      filterPanel,
      tablePanel,
      traineeDetail,
    },
    data() {
      return {
        loading: false,
        dialog: {
          traineeDetail: {
            visible: false,
            title: '',
            detail: [],
          },
        },
      }
    },
    computed: {
      //
    },
    methods: {
      handleUpdate(loading) {
        this.loading = loading;
      },
      handleShowDetail(row) {
        this.dialog.traineeDetail.detail = row.detail;
        this.dialog.traineeDetail.title = row.detail[0].traineeName + "的详细记录";
        this.dialog.traineeDetail.visible = true;
        console.log(row);
      },
    },
  }
</script>

<style>

</style>